<template>
    <view class="header">
        <view class="title">{{ $t('information.profit') }}</view>
    </view>
    <scroll-view scroll-x="true" class="nav" :scroll-into-view="navbarsId">
        <view v-for="(item, index) in navbars" :key="index" :id="'tab' + index"
            :class="['tabs', { 'text-white': currentIndex == index }]" @click="changeTab(index)">
            {{ $t(`information.profit.${item.title}`) }}
            <view class="line" v-if="currentIndex == index"></view>
        </view>
    </scroll-view>

    <view class="scroll-box">
        <swiper :autoplay="false" :duration="250" :current="currentIndex" @change="changeIndex"
            :style="'height:' + 100 + 'vh'" class="swiperBox">
            <swiper-item v-for="(item, index) in navbars" :key="index">
                <scroll-view scroll-y="true" :style="'height:' + 100 + 'vh'">
                    <view class="swiper-item">
                        <template v-if="item.title == 'jiaoyi'">
                            <view v-for="(ele, i) in item.list" :key="i" class="itemBox">
                                <view class="time">
                                    {{ ele.timeNow }}
                                    <view class="dot">
                                        <view class="dot-box">
                                            <view class="round"></view>
                                        </view>
                                    </view>
                                </view>
                                <view class="views">
                                    <view class="left">
                                        <view class="title">{{ ele.title }}</view>
                                        <view class="uid">{{ `${$t('information.profit.uid')}：${ele.uid}` }}</view>
                                    </view>
                                    <view class="right">
                                        <view class="value">{{ ele.value }}</view>
                                    </view>
                                </view>
                            </view>
                        </template>
                        <template v-if="item.title == 'chuzhi'">
                            <view v-for="(ele, i) in item.list" :key="i" class="itemBox">
                                <view class="time">
                                    {{ ele.addTime }}
                                    <view class="dot">
                                        <view class="dot-box">
                                            <view class="round"></view>
                                        </view>
                                    </view>
                                </view>
                                <view class="views">
                                    <view class="left">
                                        <view class="uid">{{ `${$t('information.profit.uid')}：${ele.uid}` }}</view>
                                        <!-- <view :class="['state', 'text-blue']">
                                            <image class="state-icon"
                                                :src="`../../../static/icon/${ele.state == '0' ? 'pass' : 'unpass'}.png`"
                                                mode="" />
                                            {{
                                                ele.state == '0' ? $t('information.profit.state0') :
                                                $t('information.profit.state1')
                                            }}
                                        </view> -->
                                    </view>
                                    <view class="right">
                                        <view :class="['chuzhi-value', 'text-red']">{{
                                            ele.value
                                        }}
                                        </view>
                                    </view>
                                </view>
                            </view>
                        </template>
                        <template v-if="item.title == 'tixian'">
                            <view v-for="(ele, i) in item.list" :key="i" class="itemBox">
                                <view class="time">
                                    {{ ele.addTime }}
                                    <view class="dot">
                                        <view class="dot-box">
                                            <view class="round"></view>
                                        </view>
                                    </view>
                                </view>
                                <view class="views">
                                    <view class="left">
                                        <view class="uid">{{ `${$t('information.profit.uid')}：${ele.uid}` }}</view>
                                        <!-- <view :class="['state', 'text-blue']">
                                            <image class="state-icon"
                                                :src="`../../../static/icon/${ele.state == '0' ? 'pass' : 'unpass'}.png`"
                                                mode="" />
                                            {{
                                                ele.state == '0' ? $t('information.profit.state0') :
                                                $t('information.profit.state1')
                                            }}
                                        </view> -->
                                    </view>
                                    <view class="right">
                                        <view :class="['chuzhi-value', 'text-red']">{{
                                            ele.value
                                        }}
                                        </view>
                                    </view>
                                </view>
                            </view>
                        </template>
                    </view>
                </scroll-view>
            </swiper-item>
        </swiper>
    </view>


    <!-- 抽屉 -->
</template>

<script setup>
import { ref, reactive } from 'vue'
import { requestApi } from '@/api';
import { onLoad } from '@dcloudio/uni-app';
import { formateDate } from '@/utils/formatter';
import { getKey } from '@/utils/storage';
const scrollH = ref(0)
const option = reactive({
    pageNum: '',
    pageSize: ''
})
async function getUserCapitalDetail() {
    const [res1, res2, res3] = await Promise.all([
        requestApi.getUserCapitalDetail(),
        requestApi.recharge(option),
        requestApi.withdraw(option),
    ])
    navbars.value.map(item => {
        if (item.id == '1') {
            const { data } = res1
            item.list = data.positions.map(item => {
                let { buyOrderTime, stockName, buyOrderId, allProfitAndLose } = item
                const date = new Date(buyOrderTime)
                return {
                    timeNow: formateDate(date),
                    title: stockName,
                    value: allProfitAndLose,
                    uid: buyOrderId,
                }
            })
        } else if (item.id == '2') {
            const { data } = res2
            item.list = data.list.map(item => {
                let { payTime, payAmt, orderStatus, orderSn, addTime } = item
                const minutes = "yyyy-MM-dd hh:mm"
                const second = "yyyy-MM-dd hh:mm:ss"
                return {
                    addTime: formateDate(new Date(addTime), minutes),
                    value: payAmt,
                    state: orderStatus,
                    uid: orderSn,
                }
            })
        } else {
            const { data } = res3
            item.list = data.list.map(item => {
                let { withAmt, orderStatus, bankName, applyTime } = item
                const minutes = "yyyy-MM-dd hh:mm"
                const second = "yyyy-MM-dd hh:mm:ss"
                return {
                    addTime: formateDate(new Date(applyTime), minutes),
                    value: withAmt,
                    state: orderStatus,
                    uid: bankName,
                }
            })
        }
    })
}


const navbars = ref([
    {
        id: "1",
        title: "jiaoyi",
    },
    {
        id: "2",
        title: "chuzhi",
    },
    {
        id: "3",
        title: "tixian",
    },
])
const navbarsId = ref('')
const currentIndex = ref('')
function changeIndex(e) {
    currentIndex.value = e.detail.current
}
function changeTab(index) {
    if (currentIndex.value == index) return
    currentIndex.value = index
    if (currentIndex.value < 6) {
        navbarsId.value = 'tab' + index
    }
}
onLoad(() => {
    console.log(getKey('profitIndex'));
    currentIndex.value = getKey('profitIndex') || 0
    getUserCapitalDetail()
})

</script>

<style lang="scss">
page {
    background-color: $uni-bg-color-dark;
}

.header {
    width: 100%;
    height: 88rpx;
    // #ifndef H5
    margin-top: 88rpx;
    // #endif
    display: flex;
    justify-content: space-between;
    align-items: center;

    .title {
        text-align: center;
        color: #fff;
        margin: 0 auto;
        font-size: 32rpx;
    }

}

.nav {
    color: #7E8394;
    margin: 0 66rpx;

    .tabs {
        display: inline-block;
        vertical-align: middle;
        height: 50rpx;
        line-height: 50rpx;
        margin-right: 48rpx;
        position: relative;
        transition: all .25s;
    }

    .line {
        position: absolute;
        left: calc(50% - 16rpx);
        bottom: 0rpx;
        border-radius: 65rpx;
        width: 32rpx;
        height: 6rpx;
        background-color: #fff;
        transition: all .25s;
    }
}

.scroll-box {

    .swiperBox {
        padding: 35rpx 40rpx 0rpx;
        border-radius: 0px 0px 28rpx 28rpx;

        .swiper-item {
            color: #fff;
            border-left: #2d7dfc solid 1px;

            .itemBox {
                position: relative;

                .time {
                    margin-left: 38rpx;
                    position: relative;

                    .dot {
                        position: absolute;
                        left: -40rpx;
                        top: 17rpx;

                        .dot-box {
                            width: 11rpx;
                            height: 3rpx;
                            background-color: #2d7dfc;
                            position: relative;

                            .round {
                                width: 10rpx;
                                height: 10rpx;
                                background-color: #2d7dfc;
                                border-radius: 100%;
                                position: absolute;
                                bottom: -3.5rpx;
                                right: -10rpx;
                            }
                        }
                    }
                }

                .views {
                    margin-left: 38rpx;
                    height: 119rpx;
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    padding-left: 23rpx;
                    background-color: #1d212c;
                    border-radius: 20rpx;
                    margin-bottom: 40rpx;

                    .left {
                        .title {
                            height: 40rpx;
                        }

                        .uid {
                            margin-top: 6rpx;
                            height: 28rpx;
                            color: #7E8394;
                            font-size: 20rpx;
                            font-weight: 400;
                        }

                        .state {
                            font-size: 20rpx;

                            .state-icon {
                                width: 16rpx;
                                height: 16rpx;
                            }
                        }
                    }

                    .right {
                        color: #22A875;
                        font-size: 36rpx;
                        margin-right: 27rpx;

                        .value {
                            height: 51rpx;
                        }
                    }
                }
            }
        }
    }

}

.text-white {
    color: #fff;
}

.text-blue {
    color: #2D7DFC;
}

.text-grey {
    color: #4D4D4D;
}

.text-green {
    color: #22A875;
}

.text-red {
    color: #F04848;
}
</style>